<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>webview百度地图</title>

		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				background-color: red;
			}


			#container {
				width: 100%;
				height: 100%;
			}

			button {
				position: fixed;
				z-index: 10000;
				left: 0;
				right: 0;
			}
			#btn{
				width: 100px;
				height: 100px;
				position: fixed;
				top: 50px;
				left: 50%;
				z-index: 999;
			}
		</style>
	</head>
	<body>
		<div class="search_ipt">
			<input type="text" />
		</div>
		<div id='container'></div>

		<button id="btn" @click="handleSend">发消息给app</button>

	</body>


	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>

	<!-- 百度地图 -->
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=Vvjb4mc2SMY2NeMLsNGdGgVtpHLS0Hso"></script>
	<script type="text/javascript"
		src="https://mapopen.bj.bcebos.com/github/BMapGLLib/TrackAnimation/src/TrackAnimation.min.js"></script>
	<!-- vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
	<script type="text/javascript">
		document.addEventListener('UniAppJSBridgeReady', function() {
			const vm = new Vue({
				el: '#mapPage',
				data: {
					map: null,
				},
				mounted() {
					this.initMap();
					window.getVueMessage = (data) => {
						console.log(data.text, '收到APP消息')
					}
					document.getElementById('btn').onclick = function(){
					      uni.postMessage({
					       data: {
					        msg: 'xxxx'
					       }
					      })
					     }

					
				},
				methods: {
					initMap() {
						this.map = new BMapGL.Map("container");
						let point = new BMapGL.Point(121.664985, 29.971749); 
						this.map.centerAndZoom(point, 13); 
						this.map.enableScrollWheelZoom(true);     
						// 轨迹
						this.guiji()
					},
					guiji(){
						var path = [{
							'lng': 116.297611,
							'lat': 40.047363
						}, {
							'lng': 116.302839,
							'lat': 40.048219
						}, {
							'lng': 116.308301,
							'lat': 40.050566
						}, {
							'lng': 116.305732,
							'lat': 40.054957
						}, {
							'lng': 116.304754,
							'lat': 40.057953
						}, {
							'lng': 116.306487,
							'lat': 40.058312
						}, {
							'lng': 116.307223,
							'lat': 40.056379
						}];
						var point2 = [];
						for (var i = 0; i < path.length; i++) {
							point2.push(new BMapGL.Point(path[i].lng, path[i].lat));
						}
						var pl = new BMapGL.Polyline(point2);
						setTimeout(() => {
							new BMapGLLib.TrackAnimation(this.map, pl, {
								overallView: true, 
								tilt: 30,
								duration: 20000, 
								delay: 300 
							}).start()
						}, 3000);
						// .cancel()强制停止动画
					},
					handleSend(){
						console.log("lsllslsllsls");
						uni.postMessage({
							data: {
								msg: 'xxxx'
							}
						})
					}
					
				},
				
			})
		});
		
		
	



		

	
	</script>

</html>